<template>
	<view class="study">
		<view class="title">总词汇量: <text>{{total}}</text></view>
		<view class="list">
			<view class="li" v-for="(item, index) in arr">
				<view class="left">
					<text>{{index + 1}}.{{item}}</text>
					<image @click="sound(item)" class="icon" src="../../static/icon-sound.png" mode="widthFix"></image>
				</view>
				<view class="right">
					<image class="icon" src="../../static/i-star.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { translateList, translateWord , translateSound} from '../../api/index.js'
	export default {
		data() {
			return {
				// 词汇数组
				list: [],
				// 词汇数量
				total: 0,
				// 每一组15个
				arr: []
			};
		},
		onLoad() {
			this.wordList();
			this.getWords()
		}, 
		methods: {
			sound(text){
				translateSound(text);
			},
			// 每一组词汇
			getWords(page=1,pageSize=15){
				let startIndex = page * pageSize
				let endIndex = startIndex + pageSize;
				this.arr = this.list.slice(startIndex,endIndex)
			},
			// 获取词汇列表
			async wordList(){
				// 从本地获取所有词汇（10927个）
				let str = uni.getStorageSync("WORD_LIST");
				if(str){
					let obj = JSON.parse(str)
					this.list = obj.list;
					this.total = obj.total;
					console.log("本地...")
				}
				else {
					// 把所有词汇（10927个）储存在本地，提升检索速度
					await translateList().then(data => {
						// console.log(data)
						if(data.list){
							this.list = data.list;
							this.total = data.total;
							uni.setStorageSync("WORD_LIST",JSON.stringify(data));
						}
					})
					.catch(err => {
						console.log('-->',err)
						})
					}
				
			},

		}
	}
</script>

<style lang="scss">
.study {
	padding: 20rpx 30rpx;
}
.study .title {
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
}
.study .list .li {
	padding: 30rpx 10rpx;
	border-bottom: 2rpx solid #ccc;
	box-sizing: border-box;
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.study .list .li .icon {
	width: 40rpx;
	height: 40rpx;
	vertical-align: middle;
	margin-left: 30rpx;
}
</style>
